<template>
	<view id="bind-bank-page">
    <view class="description-box">
      <view class="content">
        <text class="red">银行卡、身份证、姓名、银行预留手机号码必须为同一人，
          且银行卡是平台绑定的身份证开户，银行预留手机号码是登录账号，否则不予通过，绑卡失败。</text>
        <text class="red">每人只有三次机会，请保证所有信息核对无误后提交。</text>
      </view>
    </view>
		<view class="row-list">
			<view class="row-cell" v-if="btnType == 0">
				<view class="row-cell-title">账号名</view>
				<view class="row-cell-right default-text">
					{{bankParam.bankUserName}}
				</view>
			</view>
			<view class="row-cell">
				<view class="row-cell-title">卡号</view>
				<view class="row-cell-right">
					<input class="input" type="text" v-model="bankParam.bankNum" placeholder="请输入银行卡号" />
				</view>
			</view>
			<view class="row-cell">
				<view class="row-cell-title">开户行</view>
				<view class="row-cell-right">
					<input class="input" type="text" v-model="bankParam.bankName" placeholder="请输入开户行" />
				</view>
			</view>
<!--      <view class="row-cell">
				<view class="row-cell-title">手机号</view>
				<view class="row-cell-right">
					<input class="input" type="text" v-model="bankParam.phone" placeholder="请输入开户行预留手机号" />
				</view>
			</view>-->
			<view class="row-cell">
				<view class="row-cell-title">选择银行</view>
				<view class="row-cell-right">
					<picker @change="bindPickerChange" :value="bankIndex" :range="bankArray">
						<view class="uni-input"
							:class="{'card-message-td-placeholder':(bankIndex===0),
							'card-message-td-normal':(bankIndex!==0)}"
						>{{bankArray[bankIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="row-cell">
				<view class="row-cell-title">省份城市</view>
				<view class="row-cell-right">
					<pick-regions :defaultRegionCode="defaultRegionCode" @getRegion="handleGetRegion">
					   <view v-if="regionName">{{regionName}}</view>
					   <view v-else style="color: #999999;font-size: 32upx;">点击选择省份城市</view>
					</pick-regions>
				</view>
			</view>
		</view>
		<view class="description-box">
			<view class="title">绑定银行卡说明：</view>
			<view class="content">
        务必填写正确的收款信息及营业网点，否则将会影响到账。
<!--        <text class="red">银行卡号、身份证号、姓名必须是同一人，银行预留手机号码正确，绑卡才可通过。</text>-->
<!--        <text class="red">每人只有三次机会，确保信息正确后提交！！！</text>-->
      </view>
		</view>
		<button v-if="btnType === 0" class="sumbit-btn" type="default" :loading="loading" :disabled="loading" @click="banding()">提交</button>
		<button v-if="btnType === 1" class="sumbit-btn" type="default" :loading="loading" :disabled="loading" @click="finish()">完成</button>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {
		apiBindPushUserInfo,
		apiBankIdCardBind
	} from '../../../http/apis.js'
	import {
		mapState
	} from 'vuex'
	export default {
	  props: {
      btnType: {
        type: Number,
        default: 0,// 0 -> 从银行卡进入; 1 -> 从身份证进入
      },
      bankInfo: {
        type: Object,
        default() {
          return {}
        }
      },
    },
		components:{ pickRegions },
		computed: {
			...mapState(['token']),
			regionName(){
			    // 转为字符串
			    return this.region.map(item=>item.name).join(' ')
			}
		},
		data(){
			return{
				bankIndex: 0,
				bankArray: ['请选择','中国工商银行','招商银行','中国邮政储蓄银行','中国银行','中国农业银行','中国建设银行','兴业银行','交通银行','浦发银行','平安银行'],
				bankParam: {
					token: '',
					bank: '',
					bankNum: '',
					bankUserName: '',
					submitType: 2,
					bankName: '',
          // phone: '',
					bankCity: '',
					bankProvince: '',
					system: ''
				},
				region:[],
				defaultRegionCode:'',
				loading:false
			}
		},
    created() {
      this.$msg.showToast("只有3次机会，确保信息正确，请勿随意提交！！")
      // this.bankParam.levelType = options.levelType

      // 银行卡进来使用初始化上次数据 start
      if ((this.btnType === 1) && (JSON.stringify(this.bankInfo) !== "{}")) {
        this.initBankInfoData()
        // 银行卡进来使用初始化上次数据 end
      } else {
        this.initData()
      }

      uni.getSystemInfo({
        success: (res)=> {
          this.bankParam.system = res.platform == 'ios' ? 12 :11
        }
      })
    },
    methods:{
	    // 从银行卡页面进入操作完成提交
      finish() {
        if(!this.formValidation()){
          return
        }
        if (!this.regionName) {
          this.$msg.showToast('请选择省份城市')
          return false
        }
        this.bankParam.bankProvince = this.regionName.split(' ')[0]
        this.bankParam.bankCity = this.regionName.split(' ')[1]
        this.bankParam.region = this.region
        this.$emit('finishBankInfo', this.bankParam)
      },
      // 从银行卡页面进入初始化数据
			initData(){
				apiBindPushUserInfo({
					token: this.token
				}).then(res =>{
				    if(res.data.code == 1)  {
						var result = res.data.msg
						this.bankParam = {
							token: this.token,
							bank: result.bank,
							bankNum: result.bank_num,
							bankUserName: result.true_name,
							submitType: 2,// 从银行卡页面进入2,// 从身份证页面进入1
							bankName: result.bank_name,
							bankCity: result.bank_city,
							bankProvince: result.bank_province
						}
						if (this.btnType === 1) this.bankParam.submitType = 1
						if(result.bank_province) {
							this.region.push({
								name: result.bank_province
							})
							this.region.push({
								name: result.bank_city
							})
						}
						for(var i in this.bankArray){
							if(this.bankArray[i] == result.bank)
							{
								this.bankIndex = i
							}
						}
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
      // 从身份证页面进入初始化数据
      initBankInfoData() {
        this.bankParam = this.bankInfo
        this.bankParam.token = this.token
        if(this.bankInfo.bank_province) {
          this.region.push({
            name: this.bankInfo.bank_province
          })
          this.region.push({
            name: this.bankInfo.bank_city
          })
        }
        for(var i in this.bankArray){
          if(this.bankArray[i] == this.bankInfo.bank)
          {
            this.bankIndex = i
          }
        }
        this.region = this.bankInfo.region // 发生请求不需要此字段
      },
			formValidation(){
				if (this.bankParam.bank == '') {
					this.$msg.showToast('开户银行不能为空')
					return false
				}
				if (this.bankParam.bankNum == '') {
					this.$msg.showToast('卡号不能为空')
					return false
				}
				var regExp = /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18})$/;
				if(!regExp.test(this.bankParam.bankNum)){
					this.$msg.showToast('银行卡号填写不对')
					return false
				}
				if (this.regionName == '') {
					this.$msg.showToast('请先选择省份城市')
					return false
				}
				if (this.bankParam.bankName == '') {
					this.$msg.showToast('开户行不能为空')
					return false
				}
        // let reg = /^(14[0-9]|13[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/;
        // if (!this.bankParam.phone) {
        //   this.$msg.showToast('手机号不能为空')
        //   return false
        // }
        // if (!reg.test(this.bankParam.phone)) {
        //   this.$msg.showToast('请输入正确的手机号')
        //   this.bankParam.phone = ''
        //   return false
        // }
				return true
			},
			banding() {
				if(!this.formValidation()){
					return
				}
				this.bankParam.bankProvince = this.regionName.split(' ')[0]
				this.bankParam.bankCity = this.regionName.split(' ')[1]
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.loading = true
				apiBankIdCardBind(this.bankParam).then(res =>{
					uni.hideLoading()
				    if(res.data.code == 1)  {
						this.loading = false
						this.$msg.showToast('绑定成功')
						setTimeout(()=>{
							uni.switchTab({
								url: '../profile/a'
							})
						},500)
					} else {
            this.loading = false
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					uni.hideLoading()
					this.loading = false
					this.$msg.showToast(res.data.msg)
				})
			},
			handleGetRegion(region){
        this.region = region
			},
			bindPickerChange(e) {
				this.bankIndex = e.target.value
				this.bankParam.bank = this.bankArray[e.target.value]
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	#bind-bank-page {
		.row-list {
			background: #FFFFFF;
			margin-bottom: 32upx;
			.row-cell {
				position: relative;
				border-bottom: 1px solid #E8E8E8;
				padding: 0 24upx 0 38upx;
				height: 106upx;
				line-height: 106upx;

				.row-cell-title {
					display: inline-block;
					font-size: $font-base;
					color: #333333;
					font-size: 30upx;
					width: 160upx;
				}
				.row-cell-right {
					display: inline-block;
					font-size: 30upx;
					width: 72%;
					vertical-align: middle;
					&.default-text {
						color: #999999;
					}
					.input {
						padding: 10upx 0;
						color: #333333;
						font-size: 30upx;
						.uni-input-placeholder {
							color: #999999;
						}
					}
					.card-message-td-placeholder{
						font-size: 32upx;
						color: #999999;
					}
					.card-message-td-normal{
						font-size: 32upx;
						color: #333333;
					}
				}
			}
		}
		.description-box {
			background: #FFFFFF;
			padding: 32upx;
      margin-bottom: 32upx;
			.title{
				font-size: 28upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 30upx;
				margin-bottom: 32upx;
			}
			.content {
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height:44upx;

        .red {
          display: block;
          color: red;
          position: relative;
          padding-left: 30upx;
          font-size: 40upx;
          font-weight: bold;
          line-height: 60upx;

          &::before {
            content: '';
            position: absolute;
            top: 14upx;
            left: 0;
            width: 15upx;
            height: 15upx;
            border-radius: 50%;
            background-color: red;
          }
        }
			}
		}
		.sumbit-btn {
			margin: 32upx;
			height: 96upx;
			background: $theme-background-color;
			border-radius: 10upx;
			font-size: 32upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 96upx;
		}
	}
</style>
